<template>
  <div class="interview-container">
    <!--  头部 -->
    <div class="top-box">
      <van-nav-bar
        :class="{ shadow: !company }"
        :border="false"
        @click-left="back"
        @click-right="toggleAnswerSheet"
      >
        <template #left>
          <van-icon @click="back" name="arrow-left" />
        </template>
        <template #right>
          <span :class="{ disabled: !isStart }">
            答题卡
          </span>
        </template>
        <template #title>
          <span class="custom-title"
            >面试题
            <span class="num">{{ questionList.length }}</span>
          </span>
        </template>
      </van-nav-bar>
      <!-- 企业刷题才有的筛选区域 -->
      <div class="filter-box">
        <!-- 横向滚动的tags -->
        <div class="scroll-wrap">
          <div class="content" :class="{ disabled: isStart }">
            <van-tag
              round
              :type="select.type === index ? 'primary' : ''"
              v-for="(item, index) in filterIndex"
              :key="index"
              @click="selectType(index)"
              >{{ item[0] }}</van-tag
            >
          </div>
        </div>
        <!-- 下拉列表 -->
        <van-dropdown-menu>
          <van-dropdown-item
            class="city-drop"
            v-model="select.city"
            :options="cityOptions"
            :disabled="isStart"
          >
            <template #title>城市</template>
          </van-dropdown-item>
          <van-dropdown-item
            v-model="select.position"
            :options="potitionOptions"
            class="experience-drop"
            :disabled="isStart"
          >
            <template #title>岗位</template>
          </van-dropdown-item>
          <van-dropdown-item
            class="order-drop"
            v-model="select.difficulty"
            :options="difficultyOptions"
            :disabled="isStart"
          >
            <template #title>难度</template>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>
    <!-- 刷题区域 -->
    <div class="main-box">
      <p class="question" v-if="currentQuestion.detail">
        【{{
          { 1: '单选', 2: '多选', 3: '简答' }[
            currentQuestion.detail && currentQuestion.detail.type
          ]
        }}】
        {{ currentQuestion.detail && currentQuestion.detail.title }}
      </p>
      <div class="tags">
        <span
          v-for="item in currentQuestion.detail && currentQuestion.detail.tag"
          :key="item"
          class="tag"
          >{{ item }}</span
        >
      </div>
      <!-- 选项题目 -->
      <div class="options-box van-hairline--bottom">
        <!-- 单选 选项 -->
        <van-radio-group
          v-if="currentQuestion.detail && currentQuestion.detail.type === 1"
          v-model="singleAnswer"
          :disabled="currentQuestion.result !== undefined"
        >
          <!-- error错误 right 正确 -->
          <van-radio name="A" :class="setClass('A')">
            <template #icon> A. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[0]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-radio>
          <van-radio name="B" :class="setClass('B')">
            <template #icon> B. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[1]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-radio>
          <van-radio name="C" :class="setClass('C')">
            <template #icon> C. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[2]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-radio>
          <van-radio name="D" :class="setClass('D')">
            <template #icon> D. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[3]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-radio>
        </van-radio-group>
        <!-- 多选 选项 -->
        <van-checkbox-group
          v-else-if="
            currentQuestion.detail && currentQuestion.detail.type === 2
          "
          v-model="multipleAnswer"
          :disabled="currentQuestion.result !== undefined"
        >
          <van-checkbox name="A" :class="setClass('A')">
            <template #icon> A. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[0]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-checkbox>
          <van-checkbox name="B" :class="setClass('B')">
            <template #icon> B. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[1]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-checkbox>
          <van-checkbox name="C" :class="setClass('C')">
            <template #icon> C. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[2]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-checkbox>
          <van-checkbox name="D" :class="setClass('D')">
            <template #icon> D. </template>
            <template>
              <span class="content" v-if="currentQuestion.detail">{{
                currentQuestion.detail.option[3]
              }}</span>
              <i class="iconfont iconicon_zhengque"></i>
              <i class="iconfont iconicon_cuowu"></i>
            </template>
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <!-- 服务器返回的答案的列表 -->
      <div class="answer-box" v-if="currentQuestion.result">
        <h3>答案解析</h3>
        <div
          v-if="
            [1, 2].includes(
              currentQuestion.detail && currentQuestion.detail.type
            )
          "
          class="answer"
        >
          正确答案:{{
            currentQuestion.detail && currentQuestion.detail.type === 1
              ? currentQuestion.result.singleAnswer
              : currentQuestion.result.multipleAnswer.join(',')
          }}
        </div>
        <div class="info-box">
          <div class="item">
            难度:
            {{
              { 1: '简单', 2: '中等', 3: '困难' }[
                currentQuestion.result.difficulty
              ]
            }}
          </div>
          <div class="item">
            提交次数: {{ currentQuestion.result.submitNum }}
          </div>
          <div class="item">
            正确次数: {{ currentQuestion.result.correctNum }}
          </div>
        </div>
        <p class="desc">
          {{ currentQuestion.result.answerAnalysis }}
        </p>
      </div>
    </div>
    <!-- 底部的操纵盒子 -->
    <div class="bottom-box van-hairline--top">
      <div class="content-wrap">
        <div class="left" :class="{ hidden: questionList.length === 0 }">
          <!-- 图标 -->
          <div class="icon-box">
            <span
              :class="{
                actived: collectQuestions.includes(currentQuestion.id)
              }"
              @click="collect"
            >
              <i class="iconfont iconbtn_shoucang_nor"></i>
              收藏
            </span>
            <span @click="showPop = true">
              <i class="iconfont iconbtn_shuati_fankui"></i>
              反馈
            </span>
          </div>
          <!-- 索引 -->
          <div class="index-box">
            <span>{{ questionIndex + 1 }}</span>
            /{{ questionList.length }}题
          </div>
        </div>
        <div class="right">
          <!-- 提交按钮 -->
          <van-button
            v-if="isStart && currentQuestion && !currentQuestion.result"
            @click="submit"
            :class="{
              disabled: isDisabled
            }"
            type="danger"
            :disabled="isDisabled"
            >提交</van-button
          >
          <!-- 下一题按钮 -->
          <van-button
            v-else-if="currentQuestion && currentQuestion.result && !isFinish"
            @click="nextQuestion"
            type="info"
            >下一题</van-button
          >
          <!-- 结束按钮 -->
          <van-button v-else-if="isFinish" @click="finishedAnswer" type="danger"
            >结束</van-button
          >
          <!-- 开始答题按钮 -->
          <van-button v-else @click="startQuestion" type="danger"
            >开始</van-button
          >
        </div>
      </div>
    </div>
    <!-- 意见反馈对话框 -->
    <van-popup class="suggest-pop" v-model="showPop">
      <div class="pop-wrap">
        <h3>意见反馈</h3>
        <van-field
          v-model="suggest"
          rows="5"
          type="textarea"
          placeholder="请输入你对此问题的反馈意见"
        />
        底部按钮
        <div class="button-wrap van-hairline--top">
          <div class="cancel van-hairline--right" @click="showPop = false">
            取消
          </div>
          <div :class="{ disabled: !suggest.length }" class="submit">提交</div>
        </div>
      </div>
    </van-popup>
    <!-- 答题卡 -->
    <van-popup v-model="showAnswerSheet" position="bottom">
      <div class="answer-sheet-container">
        <!-- 顶部盒子 -->
        <div class="top-box">
          <van-nav-bar :border="false">
            <template #right>
              <span>
                <span class="num" v-if="questionList">{{ questionIndex }}</span>
                /{{ questionList.length }}题
              </span>
            </template>
            <template #title>
              <span class="custom-title">答题卡题 </span>
            </template>
          </van-nav-bar>
          <div class="title-box" v-if="questionList">
            共{{ questionList.length }}题
          </div>
        </div>
        <!-- 主体区域 -->
        <div class="main-box">
          <ul>
            <li
              class="item "
              v-for="(item, index) in questionList"
              :key="index"
              :class="{
                current: questionIndex === index,
                error:
                  questionList[index].result &&
                  !questionList[index].result.isRight,
                right:
                  questionList[index].result &&
                  questionList[index].result.isRight
              }"
              @click="selectQuestion(index)"
            >
              {{ index + 1 }}
            </li>
          </ul>
        </div>
      </div></van-popup
    >
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import { getLocal } from '@/utils/local.js'
import {
  questionFilters,
  companyQuestion,
  submitQuestion,
  questionDetail,
  collectQuestion
} from '@/api/company/company'
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: 'interview',
  // 保证登录进来必须是登录的
  async created () {
    // 获取当前的token
    var token = getLocal()
    if (!token) {
      // 跳转登录页面
      Toast.fail('请登录一下')
      this.$router.push('/login')
    }
    // 获取筛选数据
    if (this.company) {
      var res = await questionFilters(this.company)
      this.filterIndex = res.data
      // 设置选中值
      this.setSeletedValue()
      console.log('filterIndex', this.filterIndex)
    }
    // 判断是否可以开始答题
    if (this.questionList.length > 0) {
      this.isStart = true
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.useInfo,
      exerciseList: state => state.exerciseList,
      collectQuestions: state => state.exerciseList
    }),
    ...mapGetters({}),
    // 是否可以提交
    isDisabled () {
      // 根据类型进行不同的判断
      if (
        this.currentQuestion.detail &&
        this.currentQuestion.detail.type === 1
      ) {
        return !this.singleAnswer
      } else if (
        this.currentQuestion.detail &&
        this.currentQuestion.detail.type === 2
      ) {
        return !this.multipleAnswer.length
      }
      return false
    },
    // 动态生成类名
    setClass () {
      return str => {
        if (this.currentQuestion.result === undefined) {
          return ''
        }
        // 单选时
        if (this.currentQuestion.detail.type === 1) {
          // 单选
          // 返回对错
          if (this.currentQuestion.result.singleAnswer === str) {
            return 'right'
          }
          if (
            this.singleAnswer === str &&
            this.singleAnswer !== this.currentQuestion.result.singleAnswer
          ) {
            return 'error'
          } else {
            return ''
          }
        }
        // 多选时
        if (this.currentQuestion.detail.type === 2) {
          // 单选
          // 返回对错
          if (
            this.currentQuestion.result &&
            this.currentQuestion.result.multipleAnswer.includes(str)
          ) {
            return 'right'
          }
          if (
            this.currentQuestion.result &&
            this.multipleAnswer.includes(str) &&
            !this.currentQuestion.result.multipleAnswer.includes(str)
          ) {
            return 'error'
          } else {
            return ''
          }
        }
      }
    },
    // 获取当前面试题
    currentQuestion () {
      return this.questionList[this.questionIndex] || {}
    },
    // 是否答题结束
    isFinish () {
      // 如果没有面试题 直接返回false
      if (this.questionList.length === 0) {
        return false
      }
      // 如果每一道题全部都有答案 说明答完了
      return this.questionList.every(v => {
        return v.result
      })
    }
  },
  filters: {
    formatOption (num) {
      return { 0: 'A', 1: 'B', 2: 'C', 3: 'D' }[num]
    }
  },
  // 侦听器
  watch: {
    // 顶部重新选择之后，修改筛选条件
    'select.type' () {
      this.setSeletedValue()
    },
    'select.city' () {
      // 获取城市的索引
      var cityIndex = this.cityOptions.findIndex(v => {
        return v.text === this.select.city
      })
      // 获取对应索引去筛选条件 职位
      this.potitionOptions = this.cityOptions[cityIndex].positions
      // 默认选中第一个
      this.select.position = this.potitionOptions[0].value
      // 难度默认选择全部
      this.select.difficulty = 0
    }
  },
  data () {
    return {
      // 企业id:
      company: this.$route.query.id,
      // 筛选条件
      filterIndex: '',
      // 城市筛选条件
      cityOptions: [],
      // 职位筛选条件
      potitionOptions: [],
      // 选择的职位
      selectPosition: 1,
      // 难度
      selectDifficulty: 0,
      // 选择的选项
      select: {
        type: 0,
        city: '',
        position: '',
        difficulty: ''
      },
      // 难度选项
      difficultyOptions: [
        { text: '不限', value: 0 },
        { text: '简单', value: 1 },
        { text: '普通', value: 2 },
        { text: '困难', value: 3 }
      ],
      // 保存面试题数据
      questionDetail: '',
      // 答题卡数组
      questionList: [],
      // 单选答案
      singleAnswer: '',
      // 多选答案
      multipleAnswer: [],
      // 试题索引
      questionIndex: 0,
      // 是否显示刷题区域
      showMain: true,
      // 弹出层
      showPop: false,
      // 是否开始刷题
      isStart: false,
      // 反馈建议
      suggest: '',
      // 是否显示答题卡
      showAnswerSheet: false,
      questionRes: {}
    }
  },
  methods: {
    ...mapActions(['setUserInfo']),
    ...mapMutations(['setquestion', 'setcollectquestions', 'clearquestion']),
    // 切换试题
    async selectQuestion (index) {
      // 重新获取数据
      // 清空选项
      this.singleAnswer = ''
      this.multipleAnswer = []
      // 判断是否已经获取过
      if (!this.questionList[index].detail) {
        // 重新获取下一题数据
        var detailRes = await questionDetail(this.questionList[index].id)
        // 设置对应试题的值
        this.questionList[index].detail = detailRes.data
      }

      // 赋值上去之后 再累加索引
      this.questionIndex = index
      // 关闭答题卡
      this.showAnswerSheet = false
      console.log('切换试题', this.questionList[index].detail)
    },
    // 选择类型
    selectType (index) {
      if (this.isStart) return
      this.select.type = index
    },
    // 显示答题卡
    toggleAnswerSheet () {
      if (this.isStart) {
        this.showAnswerSheet = true
      }
    },
    // 收藏面试题
    async collect () {
      var collectRes = await collectQuestion({ id: this.currentQuestion.id })
      // 修改vuex中的数据
      this.setcollectquestions(collectRes.data)
      // 提示用户
      this.$toast.success('操作成功')
    },
    // 设置选中的值
    setSeletedValue () {
      // 基于 索引获取对应的筛选条件 城市
      this.cityOptions = this.filterIndex[this.select.type][1]
      // 默认选中第一个
      this.select.city = this.cityOptions[0].value
      // 基于 索引获取对应的筛选条件 职位
      this.potitionOptions = this.cityOptions[0].positions
      // 默认选中第一个
      this.select.position = this.potitionOptions[0].value
      // 难度默认选择全部
      this.select.difficulty = 0
    },
    // 返回
    back () {
      this.$dialog
        .confirm({
          title: '亲, 你确认退出?',
          message: '下次重新开始刷题哦'
        })
        .then(() => {
          // 确认
          // 是否有企业id
          if (this.company) {
            return this.$router.push(`/company/detail/?id=${this.company}`)
          }
        })
        .catch(() => {
          // 取消
        })
    },
    // 提交试题
    async submit () {
      if (!this.isDisabled || !this.result) {
        var submitRes = await submitQuestion({
          id: this.currentQuestion.id,
          singleAnswer: this.singleAnswer,
          multipleAnswer: this.multipleAnswer
        })
        // 保存到当前试题的 result选项中
        this.$set(
          this.questionList[this.questionIndex],
          'result',
          submitRes.data
        )
        // 判断是否答完了
        if (this.isFinish) {
          this.$toast('刷完啦！')
        }
      }
    },
    // 下一题
    async nextQuestion () {
      // 清空选项
      this.singleAnswer = ''
      this.multipleAnswer = []
      // 重新获取下一题数据
      var detailRes = await questionDetail(
        this.questionList[this.questionIndex + 1].id
      )
      // console.log(detailRes.data)
      this.questionList[this.questionIndex + 1].detail = detailRes.data
      // 赋值上去之后 再累加索引
      this.questionIndex++
    },
    // 开始刷题
    async startQuestion () {
      var questionRes = await companyQuestion({
        id: this.company,
        position: this.select.position,
        difficulty: this.select.difficulty
      })
      // 保存面试题到vuex中 下次获取时直接通过vuex获取
      this.questionList = questionRes.data
      console.log(this.questionList)
      // 修改标记状态
      this.isStart = true
    },
    // 结束答题
    finishedAnswer () {
      this.$dialog
        .alert({
          title: '提示',
          message: '年轻人就是两个字  牛逼!!!'
        })
        .then(() => {
          // 如果是企业刷题 就返回企业详情
          if (this.company) {
            this.$router.push(`/company/detail/?id=${this.company}`)
          } else {
            // 如果是 全局刷题 就返回 刷题首页
            this.$router.push('/interview')
          }
        })
    },
    clickStep (e) {
      var offsetX = e.offsetX
      var clientWidth = e.target.clientWidth
      // 获取尺寸
      // 设置
      var percent = (offsetX / clientWidth) * 100 + '%'
      this.$refs.step.style.width = percent
    },
    togglePlay () {
      this.$refs.audio.play()
    }
  },
  destroyed () {
    // 清空面试题
    this.clearquestion()
  }
}
</script>

<style lang="less" scoped>
.interview-container {
  padding-bottom: 85px;
  .top-box {
    background-color: white;
    box-shadow: 0px 2px 4px 0px #ccc;
    /deep/.disabled[data-v-ce26e3d2],
    /deep/.van-nav-bar__title {
      color: #fff;
      font-size: 15px;
      width: 100px;
    }
    /deep/.num[data-v-ce26e3d2] {
      position: absolute;
      top: -0.13333rem;
      right: -10px !important;
      font-size: 14px;
      color: #fff !important;
    }
    /deep/.van-nav-bar {
      background-color: #ca0131;
    }
    /deep/.van-icon-arrow-left::before {
      color: #fff;
      font-size: 20px;
    }
    /deep/.iconbtn_nav_back {
      font-size: 44px;
    }
    .van-ellipsis {
      overflow: visible;
    }
    .custom-title {
      position: relative;
      .num {
        position: absolute;
        top: -5px;
        right: -15px;
        font-size: 12px;
        color: #545671;
      }
    }
    .scroll-wrap {
      width: 100%;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        padding: 15px;
        display: flex;
        &.disabled {
          opacity: 0.4;
        }
        .van-tag {
          padding: 6px 12px;
          flex-shrink: 0;
          margin-right: 10px;
          background: #f7f4f5;
          color: #545671;
        }
        .van-tag--primary {
          background: #00b8d4;
          color: white;
        }
      }
    }
    // 下拉菜单
    .experience-drop,
    .order-drop {
      /deep/.van-cell__title {
        text-align: center;
      }
      /deep/.van-cell__value {
        position: absolute;
        right: 10px;
      }
    }
    .city-drop {
      .van-index-anchor {
        transform: translateY(-1px);
        font-size: 12px;
        color: #939393;
        background-color: #f7f4f5;
      }
    }
    /deep/.van-dropdown-menu__bar {
      box-shadow: 0px 2px 4px 0px rgba(24, 26, 57, 0.04);
    }
  }
  // 背景阴影
  .shadow {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.17);
  }
  // 内容列表
  .main-box {
    padding: 20px 15px 10px;
    background-color: #fff;
    .question {
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
    }
    .tags {
      display: flex;
      .tag {
        height: 18px;
        background: #f7f4f5;
        border-radius: 5px;
        margin-right: 5px;
        font-size: 12px;
        font-weight: 400;
        color: #b4b4bd;
        padding: 5px;
      }
    }
    // 选项题目
    .options-box {
      margin-top: 28px;
      padding-bottom: 32px;
      .van-radio,
      .van-checkbox {
        min-height: 50px;
        border: 1px solid #f7f4f5;
        margin-bottom: 16px;
        font-size: 16px;
        color: #181a39;
        border-radius: 4px;
        padding: 5px 15px;
        /deep/.van-radio__icon,
        /deep/.van-checkbox__icon {
          font-size: 16px;
        }
        .iconfont {
          display: none;
          font-size: 25px;
        }
        /deep/.van-radio__label,
        /deep/.van-checkbox__label {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        // 选项的禁用状态
        /deep/.van-checkbox__label--disabled {
          color: #000;
        }
      }
      // 正确
      /deep/.van-radio[aria-checked='true'],
      /deep/.van-checkbox[aria-checked='true'] {
        border-color: #b4b4bd;
      }
      // 错误
      .van-radio.error,
      .van-checkbox.error {
        background: #ffefea;
        border-color: transparent;
        .iconicon_cuowu {
          display: flex;
          align-items: center;
          color: #ec5851;
        }
      }
      /deep/.van-radio.right,
      /deep/.van-checkbox.right {
        background: #ddfad9;
        border-color: transparent;
        color: #1dc779;
        .content {
          color: #1dc779;
        }
        .iconicon_zhengque {
          display: flex;
          align-items: center;
          color: #1dc779;
        }
      }
      // 选中
    }
    // 服务器返回的答案的列表
    .answer-box {
      padding-top: 19px;
      h3 {
        margin: 0;
        font-size: 18px;
      }
      .answer {
        margin-top: 18px;
        font-size: 16px;
        color: #1dc779;
      }
      .info-box {
        margin-top: 19px;
        padding: 10px;
        background: #f7f4f5;
        display: flex;
        border-radius: 4px;
        justify-content: space-between;
        font-size: 12px;
        color: #545671;
      }
      .desc {
        margin-top: 20px;
        text-align: justify;
        color: #181a39;
        line-height: 23px;
        font-size: 16px;
        margin-bottom: 0;
      }
    }
  }
  // 底部
  .bottom-box {
    height: 85px;
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    padding-top: 11px;

    background-color: #fff;
    .content-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      > div {
        display: flex;
        align-items: center;
        &.hidden {
          visibility: hidden;
        }
      }
    }
    .icon-box {
      display: flex;
      span {
        font-size: 12px;
        color: #b4b4bd;
        margin-right: 21px;
        i {
          display: block;
          font-size: 28px;
          color: #b4b4bc;
        }
      }
    }
    .index-box {
      font-size: 14px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      span {
        font-size: 22px;
        color: #d12d3e;
      }
    }
    .disabled {
      background-color: #f5dfe4;
      border-color: #f5dfe4;
    }
    .van-button {
      width: 98px;
      height: 40px;
      border-radius: 4px;
    }
  }
  // 弹出框
  /deep/.van-popup.suggest-pop {
    border-radius: 8px;
  }
  // 弹出框
  .pop-wrap {
    width: 304px;
    height: 297px;
    padding: 20px 20px 0;
    position: relative;
    overflow: hidden;
    h3 {
      font-size: 18px;
      text-align: center;
      margin: 0;
    }
    .van-field {
      background: #f7f4f5;
      border-radius: 4px;
      margin-top: 15px;
    }
    .button-wrap {
      height: 48px;
      display: flex;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      > div {
        flex: 1;
        text-align: center;
        line-height: 48px;
        font-size: 16px;
        color: #181a39;
      }
      .submit {
        color: #181a39;
        &.disabled {
          color: #b4b4bd;
        }
      }
    }
  }
  /deep/ .van-nav-bar__right {
    color: #fff;
    font-size: 14px;
  }
  // 答题卡
  .answer-sheet-container {
    width: 100%;
    .top-box {
      background-color: white;
      /deep/.van-nav-bar__left {
        padding-left: 0;
      }
      /deep/.iconbtn_nav_back {
        font-size: 44px;
      }
      /deep/.van-ellipsis {
        overflow: visible;
      }
      /deep/.van-nav-bar__right {
        .num {
          color: #e40137;
        }
      }
      .title-box {
        font-size: 14px;
        color: #b4b4bd;
        background-color: #f7f4f5;
        height: 44px;
        line-height: 44px;
        padding-left: 15px;
        span {
          font-size: 16px;
          color: #222222;
        }
      }
    }
    .main-box {
      background-color: #fff;
      ul {
        padding-top: 19px;
        padding-left: 15px;
        overflow: hidden;
        li {
          float: left;
          width: 33px;
          height: 33px;
          border-radius: 50%;
          text-align: center;
          line-height: 33px;
          border: 1px solid #b4b4bd;
          font-size: 14px;
          color: #b4b4bd;
          margin-right: 18px;
          margin-bottom: 19px;
        }
        // 三种状态
        li.current {
          color: #181a39;
          border-color: #181a39;
        }
        li.right {
          border-color: transparent;
          background-color: #ddfad9;
          color: #1dc779;
        }
        li.error {
          border-color: transparent;
          background: #ffefea;
          color: #ff4949;
        }
      }
    }
  }
  // 答题卡按钮禁用外观
  .van-nav-bar__right {
    .disabled {
      color: #969799;
    }
  }
}
</style>
